'use client'

import { Modal } from 'antd'
import { useState, use } from 'react'
import { ProductData } from '@/data/common'

interface IParams {
  params: Promise<{
    id: string
  }>
}

export default function Page({ params }: IParams) {
  const { id } = use(params)
  const product = ProductData.find((product) => product.id === Number(id))
  const [isModalOpen, setIsModalOpen] = useState(true)

  return (
    <Modal
      title="Basic Modal"
      closable={{ 'aria-label': 'Custom Close Button' }}
      open={isModalOpen}
      onOk={() => setIsModalOpen(false)}
      onCancel={() => setIsModalOpen(false)}
    >
      <img
        src={product?.img}
        alt="Front of men&#039;s Basic Tee in black."
        className="aspect-square w-100px h-100px rounded-md bg-gray-200 object-cover group-hover:opacity-75 lg:aspect-auto lg:h-80"
      />
    </Modal>
  )
}
